<template>
  <el-popover
    v-model="visible"
    trigger="manual"
    :width="width"
    popper-class="c-popper-form"
  >
    <template slot="reference">
      <el-button slot="reference" type="text" @click="visible = !visible">
        {{ visible ? multLang('btn_b') : multLang('btn_a') }}
        <c-icon :name="visible ? 'up' : 'down'"></c-icon>
      </el-button>
    </template>
    <slot></slot>
  </el-popover>
</template>
<script>
export default {
  name: 'CPopoverForm',
  components: {},
  props: {
    width: { type: Number, default: 680 }
  },
  data() {
    return {
      visible: false
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    this.hide()
  },
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    hide() {
      this.visible = false
    }
  }
}
</script>
<style lang="scss">
.c-popper-form {
  padding: 18px 18px 0 0;
  // .el-date-editor--daterange.el-input,
  // .el-date-editor--daterange.el-input__inner,
  // .el-date-editor--timerange.el-input,
  // .el-date-editor--timerange.el-input__inner,
  // .el-select,
  // .el-cascader {
  //   width: 100%;
  // }
}
</style>
